<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
		<title>惠大互帮</title>
		<link rel="stylesheet" type="text/css" href="./css/change_msg.css">
		<script src="./js/jquery.js"></script>
		<script src="./js/ajaxfileupload.js"></script>
		<script src="js/iscroll-zoom.js"></script>
		<script src="js/hammer.js"></script>
		<script src="js/jquery.photoClip.js"></script>
		<script src="./js/jquery.cookie.js"></script>
	</head>
	<body>
		<div class="headline">
			<span>信 息 修 改</span>
		</div>
		<div class="scroll_content">
			<div class="user_head" id="logox">
				<div class="word" id="word_head" name="file"><label class="weui_label">头像</label></div>
				<input id="file" type="file"  accept="image/*" multiple  />
				<div class="head_img">
					<img  src="images/touxiangh.png" id="head_img" />
				</div>
				<div class="on_1"><div><img src="images/on_1-min.png" alt=">" /></div></div>
			</div>
			<div class="card" id="real_name">
				<div class='word' ><label class="weui_label">用户类型</label></div>
				<div class='content'>
					<div class='info'><label class="info_word">非实名用户</label></div>
				</div>
				<div class="on_1"><div><img src="images/on_1-min.png" alt=">" /></div></div>
			</div>
			<div class="card" id="tel_article">
				<div class='word'><label class="weui_label">手机号码</label></div>
				<div class='content'>
					<div class='info'><label class="info_word" id="user_tel"></label></div>
				</div>
				<div class="on_1"><div><img src="images/on_1-min.png" alt=">" /></div></div>
			</div>
			<div class="card" id="name_article">
				<div class='word'><label class="weui_label">昵称</label></div>
				<div class='content'>
					<div class='info'><label class="info_word" id="user_name"></label></div>
				</div>
				<div class="on_1"><div><img src="images/on_1-min.png" alt=">" /></div></div>
			</div>
			<div class="card" id="psw_article">
				<div class='word'><label class="weui_label">密码</label></div>
				<div class='content'>
					<div class='info'><label class="info_word">修改密码</label></div>
				</div>
				<div class="on_1"><div><img src="images/on_1-min.png" alt=">" /></div></div>
			</div>
			
			
			<article class="tel_change">
				<div class="card">
					<div class='word'><label   class="weui_label">旧号码</label></div>
					<div class='content'>
						<input type="number" placeholder="验证码将发送到此号码" class="input tel" id="old_tel" autofocus required="required">
					</div>
				</div>
				<div class="card">
					<div class='word'><label   class="weui_label">新号码</label></div>
					<div class='content'>
						<input type="number" placeholder="请输入新手机号码" class="input tel" id="new_tel" required="required">
					</div>
				</div>
				<div class="card card_code">
					<div class='word'><label class='weui_label'>验证码</label></div>
					<div class='content_code'><input type="number" placeholder="短信验证码" class="input input_code" id="tel_code" required="required"></div>
					<div class='div_get_code'><button id='button_code' onclick="getValidateMsg_tel()" >点击获取</button></div>
				</div>
				<div class="btn">
					<button class="submit" onclick="btn_tel_change()">确认</button>
					<button class="come_back" onclick="come_back()">返回</a></button>
				</div>
			</article>
			
			<article class="name_change">
				<div class="card">
					<div class='word'><label   class="weui_label">新昵称</label></div>
					<div class='content'><input type="text"  min="2" max="6" maxlength='6' placeholder="你需要一个新昵称" class="input user_name" autofocus required="required"></div>
				</div>
				<div class="btn">
					<button class="submit" onclick="btn_name_change()" id="btn_name">保存</button>
					<button class="come_back" onclick="come_back()">返回</a></button>
				</div>
			</article>
			
			<article class='psw_change'>
				<div class="card">
					<div class='word'><label   class="weui_label">新密码</label></div>
					<div class='content'>
						<input type="password" min="6" max="16" maxlength='16' placeholder="请输入6~16位新密码" class="input user_pswd" id="new_psw_1" autofocus required="required">
					</div>
				</div>
				<div class="card">
					<div class='word'><label   class="weui_label">新密码</label></div>
					<div class='content'>
						<input type="password" min="6" max="16" maxlength='16' placeholder="请再次输入6~16位新密码" class="input user_pswd" id="new_psw_2" required="required"/>
					</div>
				</div>
				<!--<div class="card">
					<div class='word'><label   class="weui_label">手机号码</label></div>
					<div class='content'>
						<input pattern="[0-9]{11}" placeholder="请输入手机号码" class="input tel" id="tel_psw">
					</div>
				</div>-->
				<div class="card card_code">
					<div class='word'><label class='weui_label'>验证码</label></div>
					<div class='content_code'><input pattern="[0-9]{4}" placeholder="短信验证码" class="input input_code" id="psw_code" required="required"/></div>
					<div class='div_get_code'><button id='button_code' onclick="getValidateMsg_psw()" >点击获取</button></div>
				</div>
				<div class="btn">
					<button class="submit" onclick="btn_psw_change()">确认</button>
					<button class="come_back" onclick="come_back()">返回</a></button>
				</div>
			</article>
			
			<article class="htmleaf-container">
				<div class="foot-use">
					<button id="clipBtn" >使用</button>
				</div>		
				<div id="clipArea"></div>
				<div id="view"></div>
			</article>
			<div class="btn">
				<button class="submit" onclick="modifyHead()">确认</button>
				<button class="come_back" onclick="come_back_p()">返回</button>
			</div>
		</div>
		<div class="weui-tabbar">
			<a href="./host.html" class="weui-tabbar__item">
				<img src="./images/host.png" alt="主页" class="weui-tabbar__icon" />
				<p class="weui-tabbar__label">主页</p>
			</a>
			<a href="./output.html" class="weui-tabbar__item">
				<img src="./images/putout.png" alt="发布" class="weui-tabbar__icon" />
				<p class="weui-tabbar__label">发布</p>
			</a>
			<a href="./people.html" class="weui-tabbar__item weui-bar__item_on">
				<img src="./images/people-t.png" alt="个人" class="weui-tabbar__icon" />
				<p class="weui-tabbar__label">个人</p>
			</a>
		</div>
	</body>
	
	<script type="text/javascript">
		$(document).ready(function(){
			//获取来自cookie的uid
			var uid =JSON.parse($.cookie("Uid"));
			$.post(
					//接口地址
					"Hzu580Server/user_get", 
					//参数列表
					{uid: uid},
					//接收响应的方法，数据为data
		　　　  		function(data) {
					if(data != "null"){
						if(data.is_approve==true){$("#real_name").hide();}
						$("#user_tel").html(data.tel);
						$("#user_name").html(data.name);
					}
				}
			);	
			$("#new_psw_2").blur(function(){
				var psw_1=$("#new_psw_1").val();
				var psw_2=$("#new_psw_2").val();
				if(psw_1!=psw_2){
					$("#new_psw_2").css({
						"background-color":"#FF6E6E",
						"border-radius":"5px"
					});
				}
				else{$("#new_psw_2").css("background-color","#FFFFFF");}
			});
		});
		
		function come_back(){
			window.location.href = "./change_msg.html";
		}
		function come_back_p(){
			window.location.href = "./people.html";
		}
		
		//头像处理
		var obUrl = '';
		//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
		$("#clipArea").photoClip({
			width: 199,
			height: 166,
			file: "#file",
			view: "#view",
			ok: "#clipBtn",
			loadStart: function() {
				console.log("照片读取中");
			},
			loadComplete: function() {
				console.log("照片读取完成");
			},
			clipFinish: function(DataURL){
				
			}
		});
		
		
		$(function(){
			$("#real_name").click(function(){
				window.location.href = "./real_name.html";
			})
			$("#logox").click(function(){
				$(".htmleaf-container").show();
			})
			$("#psw_article").click(function(){
				$(".psw_change").show();
			})
			$("#name_article").click(function(){
				$(".name_change").show();
			})
			$("#tel_article").click(function(){
				$(".tel_change").show();
			})
			$("#clipBtn").click(function(){
				$(".head_img").empty();
				$('.head_img').append('<img src="' + imgsource + '" align="absmiddle" id="head_img" name="head_img" style=" width: 70px;height: 70px; border-radius: 50px; margin-left: 0rem;margin-top: 0rem">');
				$(".htmleaf-container").hide();
			})
		});
		function removeHTMLTag(str) {
	        str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
	        str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白
	        //str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
	        str=str.replace(/&nbsp;/ig,'');//去掉&nbsp;
	        str=str.replace(/\s/g,''); //将空格去掉
	        return str;
		}
		function getBlobBydataURI(dataURI,type) {  
	            var binary = atob(dataURI.split(',')[1]);  
	            var array = [];  
	            for(var i = 0; i < binary.length; i++) {  
	                array.push(binary.charCodeAt(i));  
	            }  
	            return new Blob([new Uint8Array(array)], {type:type });  
	        } 
		function modifyHead(){
			var $Blob = getBlobBydataURI(imgsource,'imgar/jpeg');
			var formData = new FormData();
			formData.append('upload',$Blob);
	        $.ajax({
	            type: 'post',
	            url: 'Hzu580Server/user_modifyHead',
	            data: formData,
	            contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置(详见：#1)
	            processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post，详见：#2)
	            success: function(data) {
	              	console.log(removeHTMLTag(data));
	        		if(removeHTMLTag(data) == "failed_access_denied"){
	        			alert("请先登录");
	        			window.location.href = "./login_or_register.html";
	        		}else{
	        			console.log("修改成功");
	        			alert("修改成功！\n可能存在浏览器原因，信息未能及时更新！");
						window.location.href = "./people.html";
	        		}
	            }
	        })
	    }
		function btn_tel_change(){
			$.post(
			"Hzu580Server/user_modifyTel",
			{
				code:$("#tel_code").val()

			},
				function(data){
					switch(data){
						case"succeed":
							alert("修改手机号码成功！</br>可能存在浏览器原因，信息未能及时更新！");
							window.location.href = "./change_msg.html";
						case"failed_uid_exist":
							alert("手机账号被注册");
							return;
						case"failed_tel_exist":
							alert("手机账号被注册");
							return;
						case"failed_code_wrong":
							alert("验证码错误！请稍后重试");
						case"failed_no_code":  
							alert("未输入验证码");
							return;
					}
				}
			);
		}
		function getValidateMsg_tel(){
		$.post(
			"Hzu580Server/user_getValidateMsg",
			{
				tel:$("#old_tel").val()
			},
			function(data){
				switch(data){
					case"succeed":alert("短信验证码已经发送");break;
					case"failed_frequent":alert("发送操作过于频繁，请稍候重试");break;
				}
			}
		);
	}
		function btn_name_change(){
			$.post(
			"Hzu580Server/user_modifyName",
			{
				name:$(".user_name").val()

			},
			function(){
				alert("修改成功！\n可能存在浏览器原因，信息未能及时更新！");
				window.location.href = "./change_msg.html";
			}
			); 
			
		}
		function logout(){
			//构建并发送POST请求
      		$.post(
      			//接口地址
      			"Hzu580Server/user_logout", 
      			//参数列表
      			null,
      			//接收响应的方法，数据为data
　　　  		function(data) {
					if(data == "failed_access_denied"){
						console.log("您处于未登录状态");
						$.cookie("Uid",null);
						$.cookie("is_approve",null);
						window.location.href = "./login_or_register.html";
						
					}else{
						$.cookie("Uid",null);
						$.cookie("is_approve",null);
						window.location.href = "./login_or_register.html";
					}
				}
			);
			
		}
		function btn_psw_change(){
		$.post(
			"Hzu580Server/user_modifyPassword",
			{
				password:$("#new_psw_1").val(),
				code:$("#psw_code").val()
			},
			function(data){
				switch(data){
					case"succeed":
						alert("恭喜！修改密码成功");
						logout();
						break;
					case"failed_code_wrong":
						alert("验证码错误！请稍后重试");
					case"failed_no_code":  
						alert("未输入验证码");
				}
			}
		);
	}
		function getValidateMsg_psw(){
		$.post(
			"Hzu580Server/user_ownerValidate",
			{
			},
			function(data){
				switch(data){
					case"succeed":alert("短信验证码已发送");break;
					case"failed_frequent":alert("发送操作过于频繁，请稍候重试");break;
				}
			}
		);
	}
	</script>
</html>

